<template>
  <div class="question-student">
    <LearnProcess :percent="percent"
                  :learnDay="learnDay"
                  :questionNum="questionNum"
                  :replyNum="replyNum"
                  :nobrowsedNum="nobrowsedNum"
    />



    <div class="download">
      <div class="config-title">课程学习</div>
    </div>
    <div class="classlist-container">
      <div
        v-for="(item, index) in classList"
        :key="index"
      >
        <ClassEntrance :info="item" :sequenceNumber="index" @fresh="refresh" @downloaded="downloaded($event)"/>
      </div>

    </div>

  </div>
</template>

<script>
import api from "../../../common/api"
import ClassEntrance from "./component/ClassEntrance";
import LearnProcess from "./component/LearnProcess"


export default {
  name: 'StudentCourses',
  data() {
    return {
       percent: 70,
      learnDay: 7,
      questionNum: 12,
      replyNum: 20,
      nobrowsedNum:0,
      classList: [
        {
          id: 1,
          name: "第一讲 001-PPT",
          hasDownload: false,
        }
      ]
    };
  },
  mounted() {
    //初始化
    this.refresh()

  },
  methods: {

    //刷新文件列表
    refresh() {
      //获取学习进度
      this.$getCPG(api.getLearnProcess).then(res => {
        if (res.code === 200) {
          this.percent=parseFloat((res.data*100).toFixed(2))
          }
        }
      ).catch(err => {
        console.log(err)
      })
      //获取回复数与讨论问题数量
      this.$getCPG(api.getParticipation).then(res => {
          if (res.code === 200) {
            this.questionNum=res.data.involvedQuestionNum
            this.replyNum=res.data.repliedNum
          }
        }
      ).catch(err => {
        console.log(err)
      })

    //获得未读消息
      this.$getCPG(api.getUnreaded).then(res => {
          if (res.code === 200) {
            this.nobrowsedNum=res.data.count
          }
        }
      ).catch(err => {
        console.log(err)
      })

      // todo: 获取课件列表
      this.$getCPG(api.getCourseList, {
        page: 0,
        size: 100
      }).then(res => {
        if (res.code === 200) {
          let classList = res.data
          classList.forEach(function (item) {
            item.hasDownload = false
          })
          this.classList = classList
        }

      }).catch(err => {
        console.log(err)
      })
    },
    //已下载某个文件
    downloaded(id) {
      let temp = this.classList.map(c => {
        if (c.id === id) {
          if (!c.hasDownloaded && this.percent < 100) {
            this.percent=this.percent+1/this.classList.length*100;
          }
          c.hasDownloaded = true
          return c
        } else {
          return c
        }
      })
      this.classList = temp
    }
  },
  components: {
    ClassEntrance,
    LearnProcess,
    // pdf
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/global.less";

.question-student {
  .download {
    display: flex;
  }

  .classlist-container {
    background-color: white;
    border-radius: 2px;
    padding: 30px;
  }
}

</style>
